<template>
  <transition name="fade">
    <div style="margin-top: 92px" class="wrap">
      <div class="about_img"></div>
      <p class="jianjie_title">
        <img src="../assets/img/flower.png" alt="">
        <span>铭材简介</span>
      </p>
      <div class="jianjie_body">
        <p>铭材APP是盛铭吉（北京）建设有限公司旗下的一款专注于建材销售服务的互联网服务电商平台。产品涵盖了主材、水、电、木、瓦、油6大品类，上千余种产品。为广大工长及中小型装修企业，家庭顾客提供一切建材所需。</p>
        <p>铭材APP作为中国互联网建材电商平台领导品牌，自上线以来已为上万中小企业装修公司以及工长、家庭客户提供了贴心产品服务。我们一直致力于打造一款一站式建材供应服务电商平台。力争使铭材APP成为一款亿万工长的选材神器</p>
        <p>铭材APP以盛铭吉（北京）建设有限公司作为其强大的依托后盾，其宗旨在于成为一个让亿万建材用户安心、放心、省心的一站式建材采购平台！ </p>
        <p>和您一起实现共赢未来！</p>
      </div>
      <div class="zhuanpan_img"></div>
      <p class="jianjie_title">
        <img src="../assets/img/flower.png" alt="">
        <span>合作伙伴</span>
      </p>
      <div class="huoban_title">
        <h1>大牌云集</h1>
        <p>品质保证 &nbsp 出厂底价 &nbsp  售后无忧 &nbsp  终身承诺</p>
      </div>
      <div class="swiper_content">
        <div class="swiper_wrap">
          <slider :view_number="2"
                  :initialSlide="1"
                  :scroll_type="'coverflow'"
                  :btn="true">
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.9.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.1.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.2.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.3.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.4.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.7.png')" alt="">
            </div>
            <div class="img_wrap swiper-slide">
              <img v-lazy="require('../assets/img/t6.8.png')" alt="">
            </div>
          </slider>
        </div>
      </div>

      <div class="brand_wrap"></div>
    </div>
  </transition>

</template>

<script type="text/ecmascript-6">
  import slider from '@/base_/slider-3d'
  export default {
    props: [],
    mounted() {},
    computed: {},
    methods: {},
    components: {
      slider
    }
  }
</script>

<style scoped lang="scss">
  .fade-enter-active /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 0;
    transform: translateX(100%);
  }

  .fade-enter-to /* .fade-leave-active below version 2.1.8 */
  {
    opacity: 1;
    transform: translateX(0);
    transition: all .3s;
  }
  .about_img{
    background-image: url("../assets/img/about.jpg");
    background-size: 100% 100%;
    width: 100%;
    padding-top: 62.7%;
  }
  .jianjie_title{
    width: 165px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 20px;
    >img{
      float: left;
      width: 65px;
      height: 65px;
    }
    >span{
      float: left;
      font-size: 20px;
      font-weight: bold;
      margin-top: 17px;
      margin-left: 14px;
    }
  }
  .jianjie_body{
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    padding-left: 10px;
    padding-right: 10px;
    >p{
      text-indent:30px;
      margin-top: 15px;
      line-height: 19px;
    }
  }
  .zhuanpan_img{
    width: 90%;
    margin: 30px auto ;
    padding-top: 79.2%;
    background-image: url("../assets/img/zhuanpan.png");
    background-size: 100% 100%;
  }
  .huoban_title{
    margin-top: 16px;
    >h1{
      font-size: 18px;
      font-weight: 900;
    }
    >p{
      margin-top: 15px;
      font-size: 14px;
      color: #000;
    }
  }
  .swiper_content{
    width: 100%;
    padding-top: 67%;
    margin-top:20px;
    position: relative;
  }
  .swiper_wrap{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .brand_wrap{
    width: 90%;
    margin: 30px auto 0 auto;
    padding-top: 94%;
    background-image: url("../assets/img/brand.png");
    background-size: 100% 100%;
  }
</style>
